/**
 * 文件概述
 * 详细介绍
 * @public
 * @author 杨兴潮
 * @version  v5.0
 * @copyright  南京海泰医疗信息系统有限公司
 * @team  智慧物联产品部
 * @date 2023/12/11 13:55:06
 */
export default {
  title:"andFlow组件",
  name: "andFlow",
  components: {},
  data() {
    return {
      tags: ["", "通用", "系统"],
      flowModel: {
        code: "",
        name: "",
        show_action_body: "true",
        show_action_content: "true",
        theme: "flow_theme_icon",
        link_type: "Flowchart",
        params: [],
        // 参数
        actions: [
          {
            id: "f7a6ec0031784f5a80d8633a6418fd52",
            left: "10px",
            top: "10px",
            name: "begin",
            params: {},
            title: "开始",
            icon: "begin.png",
            width: "120px",
            height: "82px",
            content: {
              content_type: "msg",
              content: "测试开始",
            },
            theme: null,
            once: "false",
            collect: "false",
            script: "",
            body_width: "91",
            body_height: "30",
          },
          {
            id: "f558687ca5f34a6c89732eb50749a15a",
            left: "660px",
            top: "120px",
            name: "end",
            params: {},
            title: "结束",
            icon: "end.png",
            width: "108px",
            height: "65px",
            body_width: null,
            body_height: null,
          },
          {
            id: "793a2a11cf8b40e9afd8bd8f04405e64",
            left: "400px",
            top: "10px",
            name: "script",
            theme: "action_theme_icon",
            params: {},
            title: "执行脚本1",
            icon: "script.png",
            width: "94px",
            height: "90px",
            body_width: null,
            body_height: null,
          },
          {
            id: "f2564ac9862b4bc281226f0b22e84dd8",
            left: "370px",
            top: "240px",
            name: "script",
            theme: "action_theme_default",
            params: {},
            title: "执行脚本2",
            icon: "script.png",
            width: "150px",
            height: "100px",
            body_width: null,
            body_height: null,
          },
          {
            id: "1c53b069bfd34d4da0ac0d74d8e539d5",
            left: "10px",
            top: "280px",
            name: "script",
            theme: "action_theme_zone",
            params: {},
            title: "执行脚本3",
            icon: "script.png",
            width: "227px",
            height: "122px",
            content: {
              content_type: "msg",
              content: "执行JS脚本",
            },
            body_width: null,
            body_height: null,
          },
          {
            id: "0a0af8e69c64465f92b07d9067f99f7b",
            left: "600px",
            top: "320px",
            name: "script",
            params: {},
            title: "执行脚本4",
            icon: "script.png",
            width: "218px",
            height: "76px",
            content: {
              content_type: "msg",
              content: "",
            },
            theme: "action_theme_box",
            once: "false",
            collect: "false",
            script: "",
            body_width: null,
            body_height: null,
          },
        ],
        // 连线
        links: [
          {
            source_id: "f7a6ec0031784f5a80d8633a6418fd52",
            target_id: "793a2a11cf8b40e9afd8bd8f04405e64",
          },
          {
            source_id: "0a0af8e69c64465f92b07d9067f99f7b",
            target_id: "f558687ca5f34a6c89732eb50749a15a",
          },
          {
            source_id: "793a2a11cf8b40e9afd8bd8f04405e64",
            target_id: "f2564ac9862b4bc281226f0b22e84dd8",
          },
          {
            source_id: "f2564ac9862b4bc281226f0b22e84dd8",
            target_id: "1c53b069bfd34d4da0ac0d74d8e539d5",
          },
          {
            source_id: "1c53b069bfd34d4da0ac0d74d8e539d5",
            target_id: "0a0af8e69c64465f92b07d9067f99f7b",
          },
        ],
        // 组
        groups: [],
        // 集合
        lists: [],
        // 其他
        tips: [],
      },
      metadata: [
        {
          name: "begin",
          tp: "action",
          title: "开始",
          des: "开始",
          group: "通用",
          tag: "通用",
          css: "begin",
          icon: "begin.png",
          params: [],
          params_html: "",
          params_script: "",
        },
        {
          name: "end",
          tp: "action",
          title: "结束",
          des: "结束",
          group: "通用",
          tag: "通用",
          css: "end",
          icon: "end.png",
          params: [],
          params_html: "",
          params_script: "",
        },
        {
          name: "group",
          tp: "group",
          title: "分组",
          des: "分组",
          group: "通用",
          tag: "通用",
          css: "group",
          icon: "group.png",
          params: [],
          params_html: "",
          params_script: "",
        },
        {
          name: "tip",
          tp: "tip",
          title: "标签",
          des: "标签",
          group: "通用",
          tag: "通用",
          css: "tip",
          icon: "tip.png",
          params: [],
          params_html: "",
          params_script: "",
        },
        {
          name: "script",
          tp: "action",
          title: "执行脚本",
          des: "",
          group: "通用",
          tag: "通用",
          css: "",
          icon: "script.png",
          params: [],
          params_html: "",
          params_script: "",
        },

        {
          name: "cmd",
          tp: "action",
          title: "系统命令",
          des: "",
          group: "系统",
          tag: "系统",
          css: "",
          icon: "cmd.png",
          params: [
            {
              name: "command",
              title: "命令",
              placeholder: "操作系统指令",
              element: "textarea",
              default: "",
              attrs: {
                rows: "4",
              },
              options: null,
              option_mode: "",
            },
            {
              name: "timeout",
              title: "超时（毫秒）",
              placeholder: "超时毫秒",
              element: "input",
              default: "10000",
              attrs: {
                type: "number",
              },
              options: null,
              option_mode: "",
            },
            {
              name: "cache",
              title: "执行结果参数名",
              placeholder: "执行结果存储到哪个参数变量",
              element: "",
              default: "",
              attrs: null,
              options: null,
              option_mode: "",
            },
          ],
          params_html: "",
          params_script: "",
        },
        {
          name: "server",
          tp: "action",
          title: "服务器",
          des: "",
          group: "通用",
          tag: "通用",
          css: "",
          icon: "server.png",
          params: [],
          params_html: "",
          params_script: "",
        },
        {
          name: "fireware",
          tp: "action",
          title: "防火墙",
          des: "",
          group: "通用",
          tag: "通用",
          css: "",
          icon: "fireware.png",
          params: [],
          params_html: "",
          params_script: "",
        },
        {
          name: "mysql",
          tp: "action",
          title: "Mysql",
          des: "",
          group: "通用",
          tag: "通用",
          css: "",
          icon: "mysql.png",
          params: [],
          params_html: "",
          params_script: "",
        },
        {
          name: "redis",
          tp: "action",
          title: "Redis",
          des: "",
          group: "通用",
          tag: "通用",
          css: "",
          icon: "redis.png",
          params: [],
          params_html: "",
          params_script: "",
        },
        {
          name: "mongodb",
          tp: "action",
          title: "MongoDB",
          des: "MongogDB 文件服务器",
          group: "通用",
          tag: "通用",
          css: "",
          icon: "mongodb.png",
          params: [],
          params_html: "",
          params_script: "",
        },
        {
          name: "nginx",
          tp: "action",
          title: "Nginx",
          des: "负载均衡",
          group: "通用",
          tag: "通用",
          css: "",
          icon: "nginx.png",
          params: [],
          params_html: "",
          params_script: "",
        },
        {
          name: "erd",
          tp: "list",
          title: "数据库实体",
          des: "数据库实体",
          group: "ER图",
          tag: "ER图",
          css: "list",
          icon: "list.png",
          params: [],
          params_html: "",
          params_script: "",
        },
        {
          name: "custom_action",
          tp: "action",
          title: "自定义类型",
          des: "自定义类型",
          group: "自定义",
          tag: "自定义",
          icon: "person.png",
          render: function (meta, action, html) {
            var el =
              '<div style="width:100px;height:100px;background-image:url(../img/shape/diamond.png);background-size: 100% 100%; background-repeat:no-repeat;">' +
              '<div style="font-size:12px;line-height:12px;position:absolute;text-align:center;height:100%;width:100%;top:calc(50% - 6px);">' +
              meta.title +
              "</div>" +
              "</div>";

            return el;
          },
        },
        {
          name: "custom_group",
          tp: "group",
          title: "自定义分组",
          des: "自定义分组",
          group: "自定义",
          tag: "自定义",
          icon: "person.png",
          render: function (meta, action, html) {
            var el =
              '<div style="width:300px;height:300px;border:1px solid #999999;background:white;"></div>';
            return el;
          },
        },
      ],
    };
  },
  created() {},
  mounted() {
    var options = {
      tags: this.tags, //组件过滤标签列表
      metadata: this.metadata, //组件元素
      flowModel: this.flowModel, //流程模型
      img_path: "../img/meta/",
      //节点单击事件
      event_action_click: this.eventActionClick,
      //节点双击事件
      event_action_dblclick: this.eventActionDblclick,
      //连线单击事件
      event_link_click: this.eventLinkClick,
      //连线双击事件
      event_link_dblclick: this.eventLinkDblclick,
      //画图板单击事件
      // event_canvas_click: this.eventCanvasClick,
    };

    andflow.newInstance("andflow", options);
    andflow.showFlow();
  },
  methods: {
    /**
     * 画图板单击事件
     * @param { * } event
     */
    eventCanvasClick(event) {
      console.log(event);
    },

    /**
     * 节点单击事件
     * @param { object } metadata 原始模板
     * @param { object } action 自身模板
     */
    eventActionClick(metadata, action) {
      console.log("节点单击事件", metadata, action);
    },

    /**
     * 节点双击事件
     * @param { object } metadata 原始模板
     * @param { object } action 自身模板
     */
    eventActionDblclick(metadata, action) {
      console.log("节点双击事件", metadata, action);
    },

    /**
     * 连线单击事件
     * @param { object } link 连线集合
     */
    eventLinkClick(link) {
      alert("link  click");
    },

    /**
     * 连线双击事件
     * @param { object } link 连线集合
     */
    eventLinkDblclick(link) {
      console.log("link", link);
    },
  },
};
